<template>
  <div class="single-page">
    <div class="add-area">
      <a-button type="primary" @click="FuncSerach">
        <template #icon>
          <PlusOutlined />
        </template>
        添加
      </a-button>
    </div>
    <!-- 内容显示区域 -->
    <div class="content-area margin-top_20">
      <ScorePlatform :columns="columns" :data="data" :pagination="pagination" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import LabelSelect from '@/components/formItem/label-select.vue';
import ScorePlatform from '@/components/page/scorePlatform-table.vue'
import { PlusOutlined, SearchOutlined, SmileOutlined, DownOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import type { TableColumnsType } from 'ant-design-vue';

// 搜索区域相关
const selectedTypeValue = ref<string>('');
const typeSelectOptions = ref([
  {
    value: 'lucy',
    lable: 'lucy'
  }, {
    value: 'luc2',
    lable: 'luc2'
  }
])

const selectedStyleValue = ref<string>('');
const styleSelectOptions = ref([
  {
    value: '类型1',
    lable: '乐行2'
  }, {
    value: '风格1',
    lable: '风格2'
  }
])

const FuncSerach = () => {
  console.log('当前1', selectedTypeValue.value);
  console.log('当前2', selectedStyleValue.value);

}
const getSelectedType = ((value: any) => {
  selectedTypeValue.value = value;
})
const getSelectedStyle = ((value: any) => {
  selectedStyleValue.value = value;
})

// 表格相关
const columns = ref<TableColumnsType>([
  {
    title: '序号',
    dataIndex: 'type',
    key: 'type',
    resizable: true,
    width: 150,
  },
  {
    title: '名称',
    dataIndex: 'style',
    key: 'style',
    resizable: true,
    width: 100,
    minWidth: 100,
    maxWidth: 200,
  },
  {
    title: 'Action',
    key: 'action',
  },
]);
const data = [
  {
    key: '1',
    type: '电视剧',
    style: '传奇',
    num: 12,
  },
  {
    key: '2',
    type: '电视剧2',
    style: '传奇2',
    num: 122,
  },
  {
    key: '3',
    type: '电视剧3',
    style: '传奇3',
    num: 1223,
  },
];
const pagination = {
  size: 'small',
  showQuickJumper: true,
  showSizeChanger: true,
  // showTitle:false,
  showTotal: (total: any) => `共 ${total} 条`,
  position: ['bottomCenter'],
  total: 200,
  current: 1,
  pageSize: 20,
}
</script>
<style lang="less" scoped>
.single-page {
  .add-area {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .content-area {
    width: 100%;
  }
}
</style>
<style lang="less" scoped>
@import "@/style/page.less";
</style>